<template>
  <div id="div1">
    <beginView
      :textInfo="this.textInfo"
      @isOpen="getOpen"
      v-if="this.isOpend==1"
    />
    <GetScore :userScore="this.userScore" v-if="this.isEnd" />
    <head-2 />
    <div id="bigTitle">最快比一比</div>
    <div id="countDown">
      倒计时<span id="timeNumber">{{ countDwon }}</span
      >s
    </div>
    <div id="bigCtant">
      <div id="leftCount" ref="leftCount">111</div>
      <div id="contant">
        <div id="big" @click="isRight('>', $event)" ref="big">></div>
        <div id="equal" @click="isRight('==', $event)" ref="equal">=</div>
        <div id="small" @click="isRight('<', $event)" ref="small">&lt;</div>
      </div>
      <div id="rightCount" ref="rightCount"></div>
    </div>
    <GetScore :userScore="this.userScore" v-if="this.isOpend==4" @onceTime="getOpenOnce"/>
  </div>
</template>

<script>
import head2 from "@/components/Head/head2.vue";
import BeginView from "@/components/beginView/beginView.vue";
import GetScore from "@/components/getScore/getScore.vue";
import Gameover from '@/components/GameOver/gameover.vue';
export default {
  components: { head2, BeginView, GetScore, Gameover },
  data() {
    return {
      countDwon: 10,
      isOpend: 1,
      isEnd: false,
      textInfo: {
        val: "游戏开始了，加油小朋友",
        textTitlle: "比一比的玩法介绍",
        textContant:
          "小朋友，每次游戏你都有20秒钟的时间进行游戏，加油！！",
      },
      numberLeft: 0,
      numberRight: 0,
      userScore: {
        score: 0,
        allCount: 0,
        rightCount: 0,
        falseCount:0,
        rightRate:0,
        echartId:"compareCount"
      },
    };
  },
  mounted() {
    this.assignment();
    console.log(this.isOpend)

  },
  updated() {
    this.$refs.big.style.backgroundColor = "#50C1E9";
    this.$refs.small.style.backgroundColor = "#50C1E9";
    this.$refs.equal.style.backgroundColor = "#50C1E9";
  },
  watch:{
    isOpend(){
      if(this.isOpend==2){
          this.contDwon()
      }
    }
  },
  methods: {
    assignment() {
      this.numberLeft = Math.floor(Math.random() * 10) + 1;
      this.numberRight = Math.floor(Math.random() * 10) + 1;
      this.$refs.leftCount.innerHTML = this.numberLeft;
      this.$refs.rightCount.innerHTML = this.numberRight;
    },
    isRight(symal, el) {
      const pre = eval(this.numberLeft + symal + this.numberRight);
      document.getElementById(el.target.id).style.backgroundColor = pre
        ? "green"
        : "red";
      if (pre) {
        this.userScore.score += 10;
        this.userScore.rightCount++;
      } else {
        this.userScore.score -= 10;
        this.userScore.falseCount++;
        if (this.userScore.score <= 0) {
          this.userScore.score = 0;
        }
      }
      console.log(pre, this.userScore.score);
      this.userScore.allCount++;
      this.assignment();
    },
    getOpen(val) {
      this.isOpend = val;
    },
    contDwon() {
      const timer = setInterval(() => {
        this.countDwon--;
        if (this.countDwon <= 0) {
          this.userScore.rightRate=this.userScore.rightCount/this.userScore.allCount
          clearInterval(timer);
          this.isEnd = !this.isEnd;
        }
      }, 1000);
    },
  },
};
</script>

<style lang="less" scoped>
#div1 {
  height: 100vh;
  #bigTitle {
    font-weight: bold;
    font-size: 22px;
    margin-top: 20px;
    letter-spacing: 3px;
  }
  #countDown {
    font-size: 18px;
    font-weight: bold;
    margin-top: 30px;
    letter-spacing: 2px;
    #timeNumber {
      color: red;
    }
  }
  #bigCtant {
    height: 60%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    font-size: 20px;
    #contant {
      height: 250px;
      width: 70px;
      display: flex;
      justify-content: space-around;
      flex-wrap: wrap;
      #big,
      #small,
      #equal {
        color: white;
        width: 70px;
        height: 70px;
        line-height: 70px;
        border-radius: 50%;
        background-color: #50c1e9;
        font-size: 23px;
      }
    }
    #leftCount,
    #rightCount {
      color: white;
      width: 80px;
      height: 80px;
      line-height: 80px;
      background-color: #7a57d1;
      border-radius: 5px;
    }
  }
}
</style>